<template>
    <div class="reviewed-list">
        <div class="reviewed-list-header">
            <div class="reviewed-list-header-left">
            </div>
            <div class="reviewed-list-header-right">
                <el-input placeholder="在本页检索" v-model="search" />
            </div>
        </div>
        <div class="reviewed-list-table">
            <el-table :data="filterTableData" :border="false" :height="tableHeight" style="width: 100%" tooltip-effect>
                <el-table-column type="expand">
                    <template #default="props">
                        <div m="4" class="table-expand">
                            <b>新闻标题: </b>
                            <p m="t-0 b-2">{{ props.row.newsTitle }}</p>
                            <b>新闻描述: </b>
                            <p m="t-0 b-2">{{ props.row.newsDesc }}</p>
                            <b>新闻内容: </b>
                            <p m="t-0 b-2">{{ props.row.newsContent }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" prop="newsDate" align="center" />
                <el-table-column label="新闻标题" prop="newsTitle" align="center" show-overflow-tooltip />
                <el-table-column label="新闻栏目" prop="categoryName" align="center" />
                <el-table-column label="新闻状态" prop="newsIsCheck" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.newsIsCheck" @change="changestaus(scope.row)" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="reviewed-list-footer">
            <el-pagination small background layout="total, prev, pager, next" :pager-count="5" :total="totals"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, onMounted, computed } from 'vue'
import api from '../../api/api'

const tableData = ref<any[]>([])

const search = ref('')

const totals = ref(0)

const currentpage = ref(0)

let tableHeight = ref(window.innerHeight - 236)


const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.newsTitle.toLowerCase().includes(search.value.toLowerCase())
    )
)

const initNews = (current: number) => {
    api.approved({ page: current, pageSize: 10 })
        .then(res => {
            if (res.data.code == 200) {
                tableData.value = res.data.data.records
                totals.value = res.data.data.total
            }
        })
        .catch(err => console.log(err))
}

const handleCurrentChange = (val: number) => {
    currentpage.value = val
    initNews(val)
}

const changestaus = (val: any) => {
    const putfd = new URLSearchParams()
    putfd.append('newsId', val.newsId)
    api.newsnocheck(putfd)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '修改审核状态成功',
                    type: 'success'
                })
                handleCurrentChange(currentpage.value)
            }
        }).catch(err => console.log(err))
}

onMounted(() => {

    handleCurrentChange(1)

    window.onresize = () => {
        tableHeight.value = window.innerHeight - 236
    }
})

</script>

<style scoped>
.reviewed-list-header {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
}

.reviewed-list-header-left {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

.reviewed-list-header-left button {
    margin-left: 15px;
}

.reviewed-list-header-right {
    padding: 10px;
}


.reviewed-list {
    background-color: #fcfffc;
    border-radius: 10px;
}

.reviewed-list-footer {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.reviewed-list-table {
    box-sizing: border-box;
    height: calc(100% - 3rem);
}

.table-expand {
    padding: 10px;
}
</style>